<template>
  <div class="page-container">
    <list-searcher v-model:searchForm="queryParam" :search-list="searchList" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData">
      <template #username="{ record }"> {{ record.sourceName }}：{{ record.username }} </template>
      <template #table-summary>
        <div class="table-info">
          <p class="table-info-item">
            同步次数：<span>{{ recordsInfo?.totalCount || '-' }} 次</span>
          </p>
          <p class="table-info-item">
            同步订单数：<span>{{ recordsInfo?.totalOrderCount || '-' }} 个</span>
          </p>
        </div>
      </template>

      <template #statusName="{ record }">
        <div class="order-info-item">
          <status-tag :value="record.status" :label="record.statusName" type="orderSyncStatus" />
          <!-- <tag :type="record.statusName == '已完成' ? 'success' : record.statusName == '失败' ? 'warn' : 'primary'">
            {{ record.statusName }}
          </tag> -->
          <a-popover trigger="click">
            <a-button v-if="record.statusName == '失败'" class="case-btn" type="outline">原因</a-button>
            <template #content>
              <p>{{ record.errorMsg }}</p>
            </template>
          </a-popover>
        </div>
      </template>
    </table-index>
  </div>
</template>

<script setup name="OrderSyncList">
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { getEnumsData, getList, getRecords } from '@/api/business/orderSync'
  import { onMounted, ref, reactive, computed } from 'vue'
  import useNavigate from '@/hooks/useNavigate'
  import { listColumns } from './options'
  import { useRoute } from 'vue-router'

  const { navigateTo } = useNavigate()

  const route = useRoute()
  const routeQuery = route.query
  // 接口参数
  const queryParam = reactive({
    // startDate: [],
    // endDate: [],
    syncStaffId: '',
  })
  const enumData = ref({})
  const dateTimeAttrs = {
    type: 'i-range-picker',
    attrs: {
      showTime: true,
      timePickerProps: {
        defaultValue: ['00:00:00', '23:59:59'],
      },
    },
  }
  const recordsInfo = ref()
  // 查询条件

  const searchList = computed(() => {
    return [
      {
        label: 'OTA渠道',
        prop: 'sourceId',
        type: 'a-select',
        options: enumData.value.thirdpartySourceEnum,
      },
      {
        label: '渠道账号',
        prop: 'username',
        type: 'a-input',
      },
      {
        label: '同步人',
        prop: 'syncStaffId',
        type: 'remote-select',
        attrs: {
          type: 'sync_staff',
        },
      },
      {
        label: '同步方式',
        prop: 'type',
        type: 'a-select',
        options: enumData.value.typeEnum,
      },
      {
        label: '同步状态',
        prop: 'status',
        type: 'a-select',
        options: enumData.value.statusEnum,
      },
      {
        label: '开始同步时间',
        prop: 'startDate',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.startTimeStart = value[0]
          queryParam.startTimeEnd = value[1]
        },
      },
      {
        label: '完成同步时间',
        prop: 'endDate',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.endTimeStart = value[0]
          queryParam.endTimeEnd = value[1]
        },
      },
    ]
  })

  // table 配置
  const table = useTable({
    columns: listColumns,
    buttons: [
      // {
      //   type: 'primary',
      //   icon: 'plus',
      //   label: '设置接收人',
      //   // permission: 'svms:business:fence:add',
      //   method: () => handleAdd(),
      // },
    ],
  })
  // 获取枚举参数
  const getEnums = () => {
    getEnumsData().then((res) => {
      const { result } = res
      enumData.value.statusEnum = result.statusEnum.map((i) => {
        return {
          label: i.name,
          value: i.value,
          isEnabled: i.isEnabled,
        }
      })
      enumData.value.thirdpartySourceEnum = result.thirdpartySourceEnum.map((i) => {
        return {
          label: i.name,
          value: i.value,
          isEnabled: i.isEnabled,
        }
      })
      enumData.value.typeEnum = result.typeEnum.map((i) => {
        return {
          label: i.name,
          value: i.value,
          isEnabled: i.isEnabled,
        }
      })
    })
  }

  // 获取同步记录统计
  const getSyncRecords = () => {
    getRecords(queryParam).then((res) => {
      const { result } = res
      recordsInfo.value = result
    })
  }
  // 列表接口调用
  const loadData = (page) => {
    const fn = useFetchTableDataApi(table, queryParam, getList)
    fn(page).then((res) => {
      if (res) {
        getSyncRecords()
      }
    })
  }
  // 新增
  const handleAdd = () => {
    navigateTo('/order-sync/create')
  }
  const getRouteData = () => {
    queryParam.startTimeStart = routeQuery.startTime
    queryParam.startTimeEnd = routeQuery.startTime
    queryParam.startDate = [queryParam.startTimeStart, queryParam.startTimeEnd]
    queryParam.sourceId = routeQuery.sourceId
    queryParam.syncStaffId = routeQuery.syncStaffId
    queryParam.type = routeQuery.otaType
  }
  // mounted 调用接口
  onMounted(() => {
    getEnums()
    loadData()
    getSyncRecords()
    if (routeQuery.startTime || routeQuery.sourceId || routeQuery.syncStaffId || routeQuery.otaType) {
      getRouteData()
      loadData(1)
    } else {
      loadData()
    }
  })
</script>

<style lang="less" scoped>
  .channel-card {
    :deep(.arco-card-body) {
      padding: 0px 0px 20px !important;
    }
  }
  .status-wrapper {
    height: 28px;
    .status-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      &.open {
        background: #00b42a;
      }
      &.close {
        background: #ea0000;
      }
    }
  }
  .case-btn {
    width: 40px;
    height: 20px;
    font-size: 12px;
    margin-left: 8px;
  }
  .auth-nums {
    display: inline-block;
    background-color: #1890ff;
    border-radius: 10px;
    padding: 0 7px;
    color: #fff;
  }
  .pop-orgs {
    max-width: 760px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    div {
      background: #f2f3f5;
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 2px 6px;
      border-radius: 2px;
      color: #1d2129;
      font-weight: 600;
      word-break: break-all;
    }
  }
  .table-info {
    display: flex;
    align-items: center;
    .table-info-item {
      margin-right: 20px;
      span {
        color: #1890ff;
      }
    }
  }
</style>
